<!DOCTYPE HTML>
<html>
<head>
<{include file='mobile/default/lib/meta.html'}>
<title>找回密码 - <{$GLOBALS.cfg.site_name}></title>
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/css/general.css" />
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/iconfont/iconfont.css">
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/css/login.css" />
<script type="text/javascript" src="<{$common.theme}>/js/zepto.min.js"></script>
<script type="text/javascript" src="<{$common.theme}>/js/verydows.mobile.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <div class="op lt"><a href="javascript:history.back(-1)"><i class="f20 iconfont">&#xe602;</i></a></div>
    <h2>找回密码</h2>
  </div>
  <{if $step == 1}>
  <script type="text/javascript">
    function nextStep(){
      var form = $('#rpform');
      form.find('input[name="username"]').vdsFieldChecker({rules:{required:[true, '请输入用户名']}});
      form.find('input[name="captcha"]').vdsFieldChecker({rules:{required:[true, '请输入验证码']}});
      form.vdsFormChecker();
    }
  </script>
  <div class="login eform">
    <form id="rpform" method="post" action="<{url c='mobile/retrieve' a='password' step='2'}>">
    <div class="user tr puff"><span class="icopos"><i class="iconfont">&#xe60c;</i></span><input class="field variseclear" type="text" name="username" placeholder="请输入用户名" required /><i class="vinclrbtn iconfont">&#xe62d;</i></div>
    <div class="captcha tr puff mt10">
      <a class="fr"><img onclick="resetCaptcha(this)" src="<{url c='api/captcha' a='image'}>" /></a>
      <span class="icopos"><i class="iconfont">&#xe601;</i></span><input class="field" name="captcha" type="text" placeholder="请输入图形验证码" />
    </div>
    </form>
    <div class="submit mt20"><a onClick="nextStep()">下一步</a></div>
  </div>
  <{elseif $step == 2}>
  <script type="text/javascript">
    var countdown = 180;
    $(function(){
      $('#sendbtn').on('click', function(){sendCaptcha()});
    });
    
    function sendCaptcha(){
      $.asynInter("<{url c='api/sendmail' a='retrieve_password'}>", null, function(res){
        if(res.status == 'success'){
          $('#sendbtn').off().removeClass('bluebtn').addClass('disbtn');
          countdown = 180;
          resendCounting();
          $('#rpform').show();
        }else{
          $.vdsPrompt({content:res.msg});
        }
      });
    }
    
    function resendCounting(){
      var timer = window.setInterval(function(){	
        if(countdown >= 0){
          $('#sendbtn').text(countdown+'秒后重新获取');
          countdown --;
        }else{
          clearInterval(timer);
          $('#sendbtn').text('重新发送验证码到邮箱').removeClass('disbtn').addClass('bluebtn').on('click', function(){sendCaptcha()});
          return false;
        }
      }, 1000);
    }
    
    function nextStep(){
      var form = $('#rpform');
      form.find('input[name="email_captcha"]').vdsFieldChecker({rules:{required:[true, '请输入验证码']}});
      form.vdsFormChecker();
    }
  </script>
  <div class="retrieve cut">
    <h3 class="bsrow f14 center"><font class="c888">邮箱地址：</font><span class="c666"><{$email}></span></h3>
    <a class="bluebtn bsbtn f14 xauto mt15" id="sendbtn">发送验证码到此邮箱</a>
    <form class="hide" id="rpform" method="post" action="<{url c='mobile/retrieve' a='password' step='3'}>">
    <input type="hidden" name="token" value="<{$token}>" />
    <div class="split"></div>
    <div class="bsrow"><input class="center" type="text" name="email_captcha" placeholder="输入邮箱中的验证码" /></div>
    <a class="redbtn bsbtn f14 xauto mt15" onClick="nextStep()">下一步</a>
    </form>
  </div>
  <{elseif $step == 3}>
  <script type="text/javascript">
    function nextStep(){
      var form = $('#rpform');
      form.find('input[name="password"]').vdsFieldChecker({rules:{required:[true, '请输入新密码'], password:[true, '新密码不符合要求，可包含字母、数字或特殊符号，长度为6-32个字符']}});
      form.find('input[name="repassword"]').vdsFieldChecker({rules:{equal:[form.find('input[name="password"]').val(), '两次密码不一致']}});
      form.vdsFormChecker();
    }
  </script>
  <div class="retrieve cut">
    <form id="rpform" method="post" action="<{url c='mobile/retrieve' a='password' step='4'}>">
    <div class="bsrow"><input type="password" name="password" placeholder="设置您的新密码" /><i class="vineyebtn iconfont">&#xe66e;</i></div>
    <div class="bsrow mt10"><input type="password" name="repassword" placeholder="确认新密码" /><i class="vineyebtn iconfont">&#xe66e;</i></div>
    </form>
    <a class="redbtn bsbtn f14 xauto mt15" onClick="nextStep()">下一步</a>
  </div>
  <{/if}>
</div>
<{include file='mobile/default/lib/footer.html'}>
</body>
</html>